<example name="Confirm">
  <file type="html" disable-auto-size>
    <div id="confirm"></div>
  </file>

  <file type="css">
    button {
      margin-right: 8px !important;
    }
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';
    import Confirm from '@jetbrains/ring-ui/components/confirm/confirm';
    import Button from '@jetbrains/ring-ui/components/button/button';

    class ConfirmDemo extends React.Component {
      state = {
        confirm: {
          show: true,
          text: 'Do you really wish to proceed?',
          description: 'A description of an action that is about to take place.',
          inProgress: false,
          onConfirm: () => {},
          onReject: () => {}
        }
      };

      componentDidMount() {
        this.showConfirm();
      }

      hideConfirm = () => {
        this.setState({confirm: {show: false}});
      }

      showConfirm = () => {
        return new Promise((resolve, reject) => {
          this.setState({
            confirm: {
              show: true,
              text: 'Do you really wish to proceed?',
              description: 'A description of an action that is about to take place.',
              onConfirm: () => this.hideConfirm() || resolve(),
              onReject: () => this.hideConfirm() || reject()
            }
          });
        }).
          then(() => console.info('Confirmed')).
          catch(() => console.warn('Rejected'));
      }

      showWithAnotherText = () => {
        return new Promise((resolve, reject) => {
          this.setState({
            confirm: {
              show: true,
              text: 'There is another question',
              onConfirm: () => this.hideConfirm() || resolve(),
              onReject: () => this.hideConfirm() || reject()
            }
          });
        }).
          then(() => console.info('Confirmed')).
          catch(() => console.warn('Rejected'));
      }

      render() {
        return (
        <div>
          <Button onClick={this.showConfirm}>Show confirm</Button>
          <Button onClick={this.showWithAnotherText}>Show another message</Button>
          <Confirm
            show={this.state.confirm.show}
            text={this.state.confirm.text}
            description={this.state.confirm.description}
            inProgress={this.state.inProgress}
            confirmLabel="OK"
            rejectLabel="Cancel"
            onConfirm={this.state.confirm.onConfirm}
            onReject={this.state.confirm.onReject}
          />
        </div>
        );
      }
     }

    render(<ConfirmDemo/>, document.getElementById('confirm'));
  </file>
</example>
